<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="sidebar">
      <scroll-container ref="scrollContainer">
        <multi-list
          @scrollTo="scrollTo"
          @scrollFoc="scrollFoc"
          :groupDatas="gradeList"
          :head="head"
        >
          <ul>
            <li
              :data-index="'tar_0_'+index"
              :class="{active: gradeList.focArr[0][index],'holdActive':index==holdIndex}"
              v-for="(grade,index) in gradeList.dataArr[0].data"
              :key="index"
            >
              {{grade.folderName}}
              <!-- <router-link to="lesson">{{grade}}</router-link> -->
            </li>
          </ul>
        </multi-list>
      </scroll-container>
    </div>
    <!--<router-view :key="key" :getChildData="getChildData"></router-view>-->
    <hsktlist :groupDatas="groupDatas" :group="1"></hsktlist>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import hsktlist from "@/components/tbkt/hskt-list";
import imglist_w312 from "../ImgList_w312";

export default {
  name: "tbkt_hskt",
  components: {
    hsktlist,
    scrollContainer,
    multiList,
    imglist_w312
  },
  computed: {
    key() {
      return this.$route.name !== undefined
        ? this.$route.name + +new Date()
        : this.$route + +new Date();
    }
  },
  data() {
    return {
      groups: [0, 1],
      holdIndex: 0,
      scrollY: 0,
      backObjName: "tbkt_hskt",
      hs: this.$store.state.hs,
      head: {
        right: "1-0"
      },
      groupDatas: {
        dataArr: [
          {
            maxLine: 4,
            dynamic: false,
            title: "华数课堂",
            data: []
          }
        ],
        focArr: [[]]
      },
      gradeList: {
        dataArr: [
          {
            maxLine: 1,
            dynamic: false,
            data: []
          }
        ],
        focArr: [[]]
      }
    };
  },
  methods: {
    scroll(pos) {
      this.scrollY = pos.y;
      // console.log(pos);
    },
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    },
    scrollFoc(obj) {
      if (obj.group == 0) {
        this.holdIndex = -1;
      }
      this.getData(this.gradeList.dataArr[0].data[obj.objindex].folderCode);
      this.hs.areaLastFocus[1] = null;
      // this.$router.push('/tbkt_hskt/'+this.gradeList[0].data[obj.objindex].folderCode)
    },
    setBackObj(backObj) {
      this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
    },
    getList() {
      let url =
        "http://ips-4k.hzdtv.tv/dataquery/childFolders?folderCode=iptvtest_001_93_1_1_2&pageIndex=1&pageItems=9";
      this.hs.ajax.post(
        "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
        "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
        obj => {
          obj = JSON.parse(obj);
          console.log(obj);
          // this.gradeList[0].data.push(obj.folders)
          this.gradeList.dataArr[0].data = this.gradeList.dataArr[0].data.concat(
            obj.folders
          );
        },
        0,
        function(msg) {},
        3000
      );
      url =
        "http://ips-4k.hzdtv.tv/dataquery/childFolders?folderCode=iptvtest_001_93_1_2_2&pageIndex=1&pageItems=9";
      this.hs.ajax.post(
        "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
        "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
        obj => {
          obj = JSON.parse(obj);
          // console.log(obj);
          // this.gradeList[0].data.push(obj.folders)
          this.gradeList.dataArr[0].data = this.gradeList.dataArr[0].data.concat(
            obj.folders
          );
        },
        0,
        function(msg) {},
        3000
      );
      url =
        "http://ips-4k.hzdtv.tv/dataquery/childFolders?folderCode=iptvtest_001_93_1_3_2&pageIndex=1&pageItems=9";
      this.hs.ajax.post(
        "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
        "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
        obj => {
          obj = JSON.parse(obj);
          // console.log(obj);
          // this.gradeList[0].data.push(obj.folders)
          this.gradeList.dataArr[0].data = this.gradeList.dataArr[0].data.concat(
            obj.folders
          );
        },
        0,
        function(msg) {},
        3000
      );
    },
    getData(folderCode) {
      let url =
        "http://ips-4k.hzdtv.tv/dataquery/childFolders?folderCode=" +
        folderCode +
        "&cImageMode=312,413,JPEG&pageIndex=1&pageItems=50";
      this.hs.ajax.post(
        "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
        "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
        obj => {
          obj = JSON.parse(obj);
          // console.log(obj);
          this.groupDatas.dataArr[0].data = obj.folders;
        },
        0,
        function(msg) {},
        3000
      );
    },
    columnClick(id) {
      // 埋点
      this.hs.ajax.get(
        "http://" + this.$store.state.domain + "/SMSCH-STB/column/click?columnId=" + id,
        data => {
        }, 0, function (msg) {
        }, 3000);
    }
  },
  created() {
    this.getList();
    this.columnClick(4)
  },
  mounted() {
    this.hs.addBlurArea([0], (group, obj, objindex) => {
      this.holdIndex = objindex;
    });
    this.hs.addSelect(this.groups, (group, objid, objindex) => {
      if (group === 1) {
        this.setBackObj({
          backFocArr: [this.hs.areaLastFocus[0].objid, this.hs.focObj.objid]
        });
        this.$router.push(
          "/hskt/zsd/" + this.groupDatas.dataArr[0].data[objindex].folderCode
        );
      }
    });

    //  查看是否有记忆焦点
    if (this.hs.cookie.get(this.backObjName)) {
      let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
      let focArr = backObj.backFocArr;
      this.hs.cookie.delOne(this.backObjName);
      // console.log(JSON.stringify(focArr) + "**************");
      this.hs.initFocus(focArr[0]);
      setTimeout(() => {
        this.hs.initFocus(focArr[1], true);
      }, 200);
    } else {
      this.hs.initFocus("0-0");
    }
  }
};
</script>

<style scoped lang="less">
.main {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  display: flex;
  .bg1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: -1;
  }
  .sidebar {
    box-sizing: border-box;
    padding-top: 184px;
    margin-left: 110px;
    margin-right: 62px;
    flex-shrink: 0;
    width: 240px;
    height: 1080px;
    overflow: hidden;
    .multi-container {
      display: flex;
      justify-content: center;
      padding-bottom: 80px;
      ul {
        display: block;
        margin-top: 20px;
        padding: 0;
        li {
          text-align: center;
          margin-bottom: 48px;
          padding: 0;
          list-style: none;
          display: block;
          width: 200px;
          height: 60px;
          line-height: 60px;
          border-radius: 30px;
          background: #6ec6e8;
          color: #104572;
          font-size: 42px;
        }
        .holdActive {
          color: #fbff92;
          background-color: #09508a;
        }
        .active {
          color: #ffffff;
          background: #0e60e9;
          transform: scale(1.1);
          border: 2px solid #fff;
        }
      }
    }
  }
}
</style>
